<template>
  <div class="Page" :style="{ height: height }" @mouseenter="onMouseenter" @mouseleave="onMouseleave">
    <div ref="doublePillarEcharts" :style="{ width: '100%', height: chartHeight, marginTop: '10px' }"></div>
  </div>
</template>

<script>
export default {
  props: {
		height: {
			type: String,
			default: 'calc(100% - 42px)'
		},
		chartHeight: {
			type: String,
			default: 'calc(100% - 32px)'
		},
		title: {
			type: Array,
      default() {
        return [];
      }
		},
    series: {
      type: Array,
      default() {
        return [];
      }
    },
		dataAxis: {
			type: Array,
      default() {
        return [];
      }
    },
    delay:{
      type:Number,
      default(){
        return 1500
      }
    }
  },
  data() {
    return {
			doublePillarEcharts: '',
      options: {},
      number:0,
      timer:null
    };
  },
	watch: {
		allLatlngs: {
			handler(val){
				this.$nextTick(() => {
					if(this.options.legend){
						this.options.xAxis.data = val.dataAxis
						this.options.legend.data = this.title
					}
					if(this.series.length){
						this.options.series = []
						this.series.forEach(item => {
							if(item.itemStyle){
								this.options.series.push({
									data: item.data,
									name: item.name,
									type: item.type,
									itemStyle: item.itemStyle,
									label: item.label?item.label:{},
									barWidth: 12,
									smooth: item.smooth?item.smooth:false,
									areaStyle: item.areaStyle?item.areaStyle:false,
									lineStyle: item.lineStyle?item.lineStyle:''
								})
							}else if(item.itemStyleArray){
								this.options.series.push({
									data: item.data,
									name: item.name,
									type: item.type,
									label: item.label?item.label:{},
									itemStyle: {
										color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, item.itemStyleArray)
									},
									barWidth: 12,
									smooth: item.smooth?item.smooth:false,
									areaStyle: item.areaStyle?item.areaStyle:false,
									lineStyle: item.lineStyle?item.lineStyle:''
								})
							}
						})
						if(this.doublePillarEcharts){
              this.doublePillarEcharts.setOption(this.options);
              clearInterval(this.timer);
						  this.dispatchAction('showTip');
						}
					}
				})
			},
			immediate: true
		},
	},
	computed: {
		allLatlngs () {
			const { series,dataAxis } = this
			return {
				series,
				dataAxis
			}
		}
	},
  mounted() {
		this.$nextTick(() => {
      this.init();
			window.addEventListener('resize', this.init, 20)
		})
  },
  methods: {
    init() {
      this.doublePillarEcharts = this.$echarts.init(
        this.$refs.doublePillarEcharts
      ); //这里是为了获得容器所在位置
			this.doublePillarEcharts.resize()
      this.options = {
        legend: {
          data: this.title,
          right:'1%',
          top:'1%',
          // orient:'vertical',
          textStyle:{
            color:'#fff',
            borderRadius:4,
          },
					itemWidth: 8,
					itemHeight: 8,
					icon: 'roundRect'
        },
        grid:{
          top:'20px',
          left:'60px',
          bottom:'20px',
          right:'20px'
        },
        tooltip:{
          trigger:'axis',
          axisPointer:{
            type:'none'
          }
        },
        xAxis: {
          type: "category",
          data: this.dataAxis,
          axisLabel: {
            textStyle: {
              color: "#FFF",
            },
          },
          axisTick: {
            alignWithLabel: true,
          },
        },
        yAxis: {
          axisTick: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#26315e",
              width: 1,
            },
          },
          type:'value'
        },
        dataZoom: [
          {
            type: "inside",
          },
        ],
        animationDuration: 3000,
        series: []
      }
    },
    // 自动选中
    dispatchAction(type){
      this.timer = setInterval(()=>{
       this.doublePillarEcharts.dispatchAction({
          type:type,
          seriesIndex:0,
          dataIndex:this.number
        });
        this.number++;
        if(this.number >= this.options.series[0].data.length){
          this.number = 0
        }
      },this.delay)
      this.$once('hook:beforeDestroy',()=>{
        clearInterval(this.timer);
      })
    },
    // 移入
    onMouseenter(){
      clearInterval(this.timer);
      this.doublePillarEcharts.dispatchAction({
        type:'hideTip',
        seriesIndex:0,
        dataIndex:this.number
      });
    },
    // 移出
    onMouseleave(){
      this.dispatchAction('showTip');
    }
  },
  beforeDestroy(){
    window.removeEventListener('resize',this.init)
  }
};
</script>

<style scoped>
.Page {
  padding: 5px;
  height: calc((100% - 42px));
	margin-top: 10px;
	box-shadow: 0 0 15px rgba(0,252,252,.3) inset;
	border-radius: 5px;
}
</style>
